<template>
  <div>

    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学习日志管理</el-breadcrumb-item>
      <el-breadcrumb-item>创建日志列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图区域 -->
    <el-card>
      <el-form ref="JournalFormRef" :rules="JournalFormRules" :model="JournalForm" label-width="0px">

        <!-- 日志标题部分 -->
        <el-form-item prop="Journal_name">
          <el-row>
            <el-col><i>*</i>日志标题</el-col>
          </el-row>
          <el-input v-model="JournalForm.Journal_name"></el-input>
        </el-form-item>

        <!-- 日志作者名部分 -->
        <el-form-item prop="Journal_author">
          <el-row>
            <el-col><i>*</i>日志作者</el-col>
          </el-row>
          <el-input v-model="JournalForm.Journal_author"></el-input>
        </el-form-item>

        <!-- 日志分类部分 -->
        <el-form-item prop="Journal_class">
          <el-row>
            <el-col><i>*</i>日志分类</el-col>
          </el-row>
          <el-select v-model="JournalForm.Journal_class" placeholder="请选择分类">
            <el-option v-for="item in arrClass" :key="item.article_class_id" :label="item.article_class_name" :value="item.article_class_name"></el-option>
          </el-select>
          <el-button @click="addClass" class="addButton" type="primary" plain>添加分类</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <div>
          <el-col :span="20">

            <!-- Tabs 标签页 -->
            <el-tabs v-model="Attribute" @tab-click="handleTabClick">
              <el-tab-pane label="学习日志内容" name="first">
                <el-button @click="LearningLog" type="primary"><i class="iconfont icon-58wangluoanquan20_wenben"></i>编辑学习日志</el-button>
              </el-tab-pane>
              <el-tab-pane label="关于学习日志" name="second">
                <el-button @click="AboutJournal" type="primary"><i class="iconfont icon-58wangluoanquan20_wenben"></i>编辑关于日志</el-button>
              </el-tab-pane>
            </el-tabs>
          </el-col>

          <!-- 发布按钮 -->
          <el-col class="col_button" :span="4">
            <el-button @click="PublishLog" type="danger"><i class="iconfont icon-49wangluoanquan20_fenxiang"></i>发布日志</el-button>
          </el-col>
        </div>
      </el-row>
    </el-card>

    <!-- 添加分类的对话框区域 -->
    <el-dialog
      title="添加日志分类"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 内容区域 -->
      <el-form :model="addClassForm" :rules="addClassFormRules" ref="addClassFormRef" label-width="100px">
        <el-form-item label="日志分类" prop="addClass_name">
          <el-input v-model="addClassForm.addClass_name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ConfirmAddClass">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 创建日志内容的对话框区域 -->
    <el-dialog
      title="编辑日志内容"
      :visible.sync="CreateJournalVisible"
      width="90%">
      <!-- 内容区域 -->
      <vue-markdown :height="306" v-model="JournalForm.Journal_content"></vue-markdown>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="CreateJournalVisible = false">取 消</el-button>
        <el-button type="primary" @click="CompleteJournal">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑关于日志对话框 -->
    <el-dialog
      title="关于学习日志"
      :visible.sync="AboutVisible"
      width="90%">
      <!-- 内容部分 -->
      <el-row>
        <!-- 关于日志标题部分 -->
        <el-col class="col_About_Form" :span="12">
          <el-form :model="AboutForm" :rules="AboutFormRules" ref="AboutFormRef" label-width="79px">
            <el-form-item label="关于名称" prop="About_name">
              <el-input v-model="AboutForm.About_name"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 关于日志内容部分 -->
      <vue-markdown :height="306" v-model="AboutForm.About_content"></vue-markdown>
      <!-- 底部部分 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="PublishAbout" class="iconfont icon-49wangluoanquan20_fenxiang" type="primary">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    this.GetClass()
  },
  data () {
    return {
      // 日志数据
      JournalForm: {
        Journal_name: '',
        Journal_author: '',
        Journal_class: '',
        Journal_content: ''
      },
      // 日志表单的验证规则
      JournalFormRules: {
        Journal_name: [
          { required: true, message: '请输入日志标题', trigger: 'blur' },
          { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
        ],
        Journal_author: [
          { required: true, message: '请输入日志作者', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        Journal_class: [
          { required: true, message: '请选择日志分类', trigger: 'blur' }
        ]
      },
      // 所有日志分类名
      arrClass: [],
      // 控制添加分类对话框的显示和隐藏
      dialogVisible: false,
      // 用来保存要添加的日志分类
      addClassForm: {
        addClass_name: ''
      },
      // 添加分类表单的验证规则
      addClassFormRules: {
        addClass_name: [
          { required: true, message: '请输入要添加的日志分类', trigger: 'blur' }
        ]
      },
      // 控制创建日志内容的对话框显示和隐藏
      CreateJournalVisible: false,
      // 控制关于日志编辑的对话框
      AboutVisible: false,
      // 被激活的页签名称
      Attribute: 'first',
      // 用来保存关于日志内容
      AboutForm: {
        About_name: '',
        About_content: ''
      },
      // 关于日志的验证规则
      AboutFormRules: {
        About_name: [
          { required: true, message: '请输入关于日志标题', trigger: 'blur' },
          { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取日志分类
    async GetClass () {
      const { data: ser } = await this.$http.get('journalClass')
      if (ser.status !== 200) return this.$message.error('获取日志分类失败!')
      this.arrClass = ser.result
    },

    // 添加分类的点击事件的处理函数
    addClass () {
      this.dialogVisible = true
    },

    // 点击确定按钮的处理函数
    ConfirmAddClass () {
      // 添加分类的表单预验证
      this.$refs.addClassFormRef.validate(async (valid) => {
        if (!valid) return false
        const { data: ser } = await this.$http.post('addJournalClass', this.addClassForm)
        if (ser.status !== 200) return this.$message.error('添加日志分类失败!')
        // 成功就重新获取数据
        this.GetClass()
        this.$message.success('添加日志分类成功!')
        // 关闭添加分类对话框
        this.dialogVisible = false
      })
    },

    // tab标签页的点击事件的处理函数
    handleTabClick () {
      console.log(this.Attribute)
    },

    // 点击学习日志的处理函数
    LearningLog () {
      this.CreateJournalVisible = true
    },

    // 点击确定完成日志的处理函数
    async CompleteJournal () {
      // 提示用户是否确定完成编辑操作
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 判断用户的操作
      if (confirmResult !== 'confirm') return this.$message.info('已取消结束编辑!')
      // 关闭对话框
      this.CreateJournalVisible = false
    },

    // 点击关于日志的处理函数
    AboutJournal () {
      this.AboutVisible = true
    },

    // 点击发布关于学习日志的处理函数
    PublishAbout () {
      // 表单预验证
      this.$refs.AboutFormRef.validate(async (valid) => {
        // 判断是否验证成功
        if (!valid) return false
        // 判断是否有关于日志的内容
        if (this.AboutForm.About_content.length === 0) return this.$message.error('请编辑关于日志内容!')
        // 提示用户是否确定发布关于日志内容
        const confirmResult = await this.$confirm('此操作将发布, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 判断用户的操作
        if (confirmResult !== 'confirm') return this.$message.info('已取消发布!')
        // 发布文章
        const { data: ser } = await this.$http.post('aboutJournal', this.AboutForm)
        if (ser.status !== 200) return this.$message.error('发布关于日志失败!')
        // 发布成功就把表单清空
        this.$refs.AboutFormRef.resetFields()
        this.AboutForm.About_content = ''
        // 提示用户发布成功
        this.$message.success('关于学习日志发布成功!')
        // 关闭对话框
        this.AboutVisible = false
      })
    },

    // 点击发布学习日志日志的处理函数
    PublishLog () {
      // 表单预验证
      this.$refs.JournalFormRef.validate(async (valid) => {
        // 判断是否验证成功
        if (!valid) return false
        if (this.JournalForm.Journal_content.length === 0) return this.$message.error('请输入日志内容')
        // 提示用户是否发布学习日志
        const confirmResult = await this.$confirm('此操作将发布学习日志, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 判读用户的操作
        if (confirmResult !== 'confirm') return this.$message.info('已取消发布!')
        // 发布学习日志
        const { data: ser } = await this.$http.post('creatJournal', this.JournalForm)
        // 判断是否发布成功
        if (ser.status !== 200) return this.$message.error('发布学习日志失败!')
        // 提示发布成功，清空表单
        this.$refs.JournalFormRef.resetFields()
        this.JournalForm.Journal_content = ''
        this.$message.success('发布学习日志成功!')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.addButton {
    margin-left: 10px;
}

.col_button {
  display: flex;
  justify-content: flex-end;
  position:relative;
  bottom: -53px;
}

.el-row {
  > .el-col {
    font-weight: bold;
    i {
      font-style: normal;
      color: red;
      margin-right: 5px;
      font-weight: bold;
    }
  }
}

.col_About_Form {
  font-weight: normal !important;
}
</style>
